<template>
    <div class="addCommodity-box">
        <div class="addCommodity-one">
            <div class="addCommodity-left">添加商品</div>
            <div class="addCommodity-right">
                <el-button class="edit_btn" size="small" @click="$router.push('/good/list')"><i class="el-icon-arrow-left"></i><span>返回</span></el-button>
            </div>
        </div>
        <div class="addCommodity-two">
            <div class="addCommodity-two-xinxi">
                <div class="right"></div>
                <div class="addCommodity-two-ding"><i class="el-icon-collection-tag" style="color: #fff;font-size: 18px;"><div>添加商品信息</div></i></div>
            </div>
            <div class="addCommodity-two-form">
                <el-form
                     style="text-align: left"
                     label-width="150px"
                     ref="product"
                    :model="product"
                    :rules="rule">
                    <el-form-item label="商品分类：">
                        <el-select v-model="product.categroyId" placeholder="请选择商品分类" class="selwid">
<!--                            <el-option v-for="(menu,index) in categroyIdList"  :title="menu.title" :key="menu.categroyId"></el-option>-->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称：" prop="productName">
                        <el-input v-model="product.productName" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="上传照片" prop="mainImage">
                        <el-upload
                                multiple
                                :auto-upload="false"
                                :before-upload="beforeUpload"
                                action="/upload/addimg"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品介绍：" prop="searchKeywords">
                        <el-input
                                placeholder="请输入商品介绍"
                                type="textarea"
                                :autosize="{ minRows: 6, maxRows: 4}"
                                v-model="product.searchKeywords"
                                class="selwid">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品标签：" prop="productDescription">
                        <el-input
                                v-model="product.productDescription"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4}"
                                placeholder="请输入商品标签"
                                class="selwid">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品货号：" prop="productCode">
                        <el-input v-model="product.productDeduction" placeholder="商品货号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品售价：" prop="currentpriceProduct">
                        <el-input v-model="product.currentpriceProduct" placeholder="商品售价"></el-input>
                    </el-form-item>
                  <!--  <el-form-item label="商品库存：" prop="productStock">
                        <el-input v-model="product.productStock" placeholder="商品库存"></el-input>
                    </el-form-item>-->
                    <el-form-item label="商品推荐：">
                        <el-checkbox-group v-model="recommends">
                            <el-checkbox  label="2" checked>新品</el-checkbox>
                            <el-checkbox  label="3">推荐</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="可用优惠卷：">
                        <el-radio-group v-model="product.discount">
                            <el-radio label="2">是</el-radio>
                            <el-radio label="3">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="服务保证：">
                        <el-checkbox-group v-model="ensures">
                            <el-checkbox label="2" checked>无忧退货</el-checkbox>
                            <el-checkbox label="3">快速退款</el-checkbox>
                            <el-checkbox label="4">免费包邮</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item size="large" class="btn">
                        <el-button class="footer_qd" @click="addInsert(product)">  完成，提交商品  </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: "AddJsProduct",
        data(){
            return{
                //添加按钮中的数据
                product:{
                    productCode:"",         //商品货号
                    categroyId: "",         //商品分类
                    productName: "",        //商品名称
                    mainImage:"",           //商品图片
                    productDescription: "", //商品标签（商品描述）
                    searchKeywords: "",     //商品介绍（搜索商品的关键字）
                    currentpriceProduct: "",//商品价格
                    // productStock:"",     //商品库存
                    recommend:'',           //商品推荐
                    discount:"2" ,          //可用优惠卷
                    ensure:'',              //服务保证
                },
                categroyIdList:[],          //商品分类的集合
                dialogVisible:false,
                dialogImageUrl:'',
                recommends:[],              //商品推荐(多选)
                ensures:[],                 //服务保证(多选)
                //添加的时候必填项验证
                rule: {
                    productName:[
                        {required:true,message:'商品名称不可以为空'},
                        {max:10,message:'最大长度为 10'}
                    ],
                    mainImage:[
                        {required:true,message:'商品图片不可以为空'},
                        {message:'请上传图片'}
                    ],
                    productDescription:[
                        {required:true,message:'商品标签不可以为空'},
                        {message:'请输入商品标签'}
                    ],
                    searchKeywords:[
                        {required:true,message:'商品介绍不可以为空'},
                        {message:'请输入商品活动'}
                    ],
                    productCode:[
                        {required:true,message:'商品货号不可以为空'},
                        {message:'请输入商品货号'}
                    ],
                    currentpriceProduct:[
                        {required:true,message:'商品售价不能为空'},
                        {message:'商品售价必须为数字值'}
                    ],
                    // productStock:[
                    //     {required:true,message:'商品库存不可以为空'},
                    //     {message:'请输入商品库存'}
                    // ],
                },
            };
        },
        methods:{
            //图片上传
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 2MB!");
                }
                return isLt2M;
            },
            handleRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handlePictureCardPreview(file) {
                console.log(file);
                this.product.mainImage = file.name;
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //获取分类
            getcategroyIdList(){
                this.$http.get("/jsProductCategroy/getTree")
                    .then(res => {
                        this.categroyIdList = res.data;
                    });
            },
            //提交
            addInsert(product){
                // 推荐、新品
                this.product.recommend = 0;
                this.recommends.forEach(item => {
                    this.product.recommend += Number(item);
                });
                // 服务保证
                this.product.ensure = 0;
                this.ensures.forEach(item => {
                    this.product.ensure += Number(item);
                });
                console.log(product);
                //validate ：需要表单重新验证一下
                this.$refs.product.validate((valid) =>{
                    if (valid){
                        this.$http.post("/product/addProduct",this.product)
                            .then(res =>{
                                alert("添加成功");
                                $router.push('/good/list')
                            }).catch(err =>{
                                alert("添加失败");
                                console.log(this.product);
                            })
                    } else{
                        return false;
                    }
                })

            },

        },
        created() {
            //获取分类
            this.getcategroyIdList();
        }
    }
</script>

<style scoped long="less">
    /*初始化样式*/
    *{
        font-size: 13px;
    }
    .selwid{
        width: 350px;
    }
    .el-input{
        width: 250px;
    }
    .btn{
        text-align: center;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 100px;
    }
    /*在外边套一个盒子，使页面不会乱跑*/
    .addCommodity-box{
        width: 1400px;
    }
    /*商品添加需要页面百分百*/
    .addCommodity-one{
        width: 90%;
        height: 50px;
        line-height: 50px;
        background: #F3F3F3;
    }
    /*商品添加*/
    .addCommodity-left{
        float: left;
        padding-left: 20px;
        color: #99A4BF;
    }
    /*返回按钮右浮动*/
    .addCommodity-right{
        float: right;
        padding-right: 130px;
    }
    /*添加商品需要居中四边需要一个边框*/
    .addCommodity-two{
        width: 1000px;
        margin: 0 auto;
        border: 1px solid #E4E4E4;
    }
    /*添加商品信息的样式*/
    .addCommodity-two-xinxi{
        position: relative;
        top: 40px;
        left: -200px;
        float: left;
        width: 230px;
        height: 50px;
        background: rgba(158,167,180,.8);
    }
    /*需要设置一个右边的三角形边框以及需要定位定上去*/
    .addCommodity-two-xinxi .right{
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-left: 26px solid rgba(158,167,180,.8);
        border-bottom: 20px solid transparent;
        font-size: 0;
        line-height: 0;
        position: relative;
        left: 230px;
    }
    /*添加商品信息的文字需要一个定位*/
    .addCommodity-two-ding{
        position: relative;
        top: -35px;
        padding-left: 25px;
    }
    /*商品信息需要右浮动*/
    .addCommodity-two-ding div{
        font-size: 18px;
        color: #fff;
        float: right;
    }
    /*商品的表单信息样式*/
    .addCommodity-two-form{
        padding-top: 120px;
        width: 600px;
    }
    /*上传图片按钮样式*/
    .footer_qd{
        background: #1ABC9C;
        width: 150px;
        height: 40px;
    }
    /*预览图*/
    .imgs{
        padding-top: 20px;
        width: 200px;
        height: 180px;
        border: 1px solid #E4E4E4;
    }
    .imgs li{
        list-style: none;
        margin-left: 15px;
        float: left;
    }
    .imgs li img{
        width: 45px;
        height: 45px;
    }
</style>